<#include "../../inc/inc.ftl"/>
<@html title_='注册' css_=['life/login/login.css'] fontawesome=true>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <meta name="description" content="">
    <meta name="author" content="ThemeBucket">
    <script>if (window.top !== window.self) {
        window.top.location = window.location;
    }
    </script>
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    <link rel="stylesheet" href="${root}/tools/toastr/toastr.min.css">
</head>

<body>
<div class="top"><a class="logo" href="/"><img src="${root}images/life.png" style="height: 100%" class="logo_img"/> </a>
</div>

<#--banner-->
<div class="banner">
    <div id="bannerbg">
        <img alt="background" src="http://ob2dt6f5q.bkt.clouddn.com/xingkong1.jpg?imageslim&imageView2/0/w/1920/h/1080"
             style="FILTER:blendTrans(duration=10)" name="imgs" id="imgs" width="1920" height="570"/>
        <img alt="ui" src="${root}/images/login/bannerhover01.png"/>
        <img alt="ui-2" src="${root}/images/login/bannerhover02.png"/>
    </div>
</div>

<div class="login" style="width: 320px">
    <p class="user_login" style="width: 320px">注册用户</p>
    <form role="form" id="registerForm" style="width:320px" action="/register" method="post">
        <input type="text" name="username" value="" id="username" placeholder="请输入用户名" class="login_input login_name"
               style="width: 220px" minlength="2" maxlength="32">
        <input type="password" name="password" value="" id="password" placeholder="请输入密码"
               class="login_input login_password" style="width: 220px" minlength="6">
        <input type="text" name="email" value="" id="email" placeholder="请输入邮箱" class="login_input email" minlength="2"
               style="width: 220px" maxlength="32">
        <input type="text" name="imageCode" value="" id="imageCode" placeholder="请填写验证码" style="display: inline-block;width: 145px;margin-left: 31px"
               class="login_input image_code" maxlength="4">
        <button type="button" value="获取验证码" onclick="sendImageCode()" class="login_btn" id="imageCodeImg"
                style="background: #102456;width: 75px;font-size: 8px;display: inline-block;height: 35px;line-height: 35px;cursor: pointer">
            获取验证码
        </button>
        <button type="button" value="注册" id="btn" onclick="check()" class="login_btn"
                style="background: #102456;margin-top: 25px;cursor: pointer">注册
        </button>
    </form>
</div>

<#--<div class="footer">
    <div class="footer_con">
        <p class="company_message">经营者名称：德玛西亚 许可证编号：
            <a target="_blank" style="padding-left: 10px;color:#a4a4a4;" href="#">JY14403030012013</a>
        </p>
        <p class="company_message">Copyright © 2018 life Inc. All Rights Reserved.
            <a target="_blank" style="padding-left: 10px;color:#a4a4a4;"
               href="http://www.miitbeian.gov.cn/publish/query/indexFirst.action">粤ICP备11021598号-2</a>
        </p>

        <p class="company_message">全国热线：4008-310-521</p>
    </div>
</div>-->

<div class="rightbox" style="margin-right: 3%">
    <div class="iphone">
        <span style="margin-left:none;">全国热线</span>
        <div class="iphonehover">
            <img src="http://ob2dt6f5q.bkt.clouddn.com/iphonehover.png"/>
        </div>
    </div>
    <div class="iphone code">
        <span style="margin-left:none;">官方微信</span>
        <div class="codehover">
            <img src="http://ob2dt6f5q.bkt.clouddn.com/codehover.png"/>
        </div>
    </div>
</div>
<script src="${root}/tools/jquery/jquery.form.js"></script>
<script src="${root}/tools/jquery/jquery.logosDistort.min.js"></script>
<script src="${root}/tools/layui/lay/modules/layer.js"></script>
<script>
    $("#bannerbg").logosDistort();
</script>
<script src="${root}/tools/flickity.pkgd.min.js"></script>
<script>

    var ImgSrc = new Array();//图片地址
    ImgSrc[0] = "http://ob2dt6f5q.bkt.clouddn.com/xingkong1.jpg?imageslim&imageView2/0/w/1920/h/1080"
    /* ImgSrc[1] = "${root}/images/login/banner04.jpg"
    ImgSrc[2] = "${root}/images/login/banner01.jpg"
    ImgSrc[3] = "${root}/images/login/banner03.jpg"*/
    for (var i = 0; i < ImgSrc.length; i++) {
        (new Image()).src = ImgSrc[i];
    }//预加载图片
    var ImgAlt = new Array();//鼠标放上去显示的文字
    ImgAlt[0] = ""
    ImgAlt[1] = ""
    ImgAlt[2] = ""
    ImgAlt[3] = ""
    var ImgHerf = new Array();//链接
    ImgHerf[0] = ""
    ImgHerf[1] = ""
    ImgHerf[2] = ""
    ImgAlt[3] = ""
    var step = 0;
    function slideit() {
        var oImg = document.getElementById("imgs");
        if (document.all) {
            oImg.filters.blendTrans.apply();
        }
        oImg.src = ImgSrc[step];
        document.getElementById("bannerbg").href = ImgHerf[step];
        oImg.title = ImgAlt[step];
        if (document.all) {
            oImg.filters.blendTrans.play();
        }
        step = (step < (ImgSrc.length - 1)) ? (step + 1) : 0;
        (new Image()).src = ImgSrc[step];//加载下一个图片
    }
    setInterval("slideit()", 2000);
</script>

<script>
    $(document).keydown(function (e) {
        if (e.keyCode == 13) {
            check();
        }
    });

    function sendImageCode() {
        var email = $("#email").val();
        var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
        if (!myreg.test(email)) {
            layer.msg("请填写正确的邮箱!", {icon: 5});
            return false;
        }
        $("#imageCodeImg").attr("disabled","disabled");
        var emails = [];
        emails.push(email);
        $.ajax({
            url: "${root}/api/send/email",
            data: {"emails": JSON.stringify(emails),"type":"register"},
            type:"post",
            success: function (data) {
                layer.msg("验证码发送成功!", {icon: 6});
                $("#imageCodeImg").removeAttr("disabled");
            }
        });
    }

    function check() {
        disableBtn();
        var time = 1200;
        var username = $("#username").val();
        var password = $("#password").val();
        if (!username) {
            layer.msg("请输入用户名!", {icon: 5,time:time});
            setTimeout(function () {
                removeDisable();
            },time)
            return;
        }
        if (!password) {
            layer.msg("请输入密码!", {icon: 5,time:time});
            setTimeout(function () {
                removeDisable();
            },time)
            return;
        }
        if (!checkCode()) {
            layer.msg("验证码错误!", {icon: 5,time:time});
            setTimeout(function () {
                removeDisable();
            },time)
            return;
        }
        var optionsPost = {
            dataType: "json",
            success: function (data) {
                if(data.code==0){
                    layer.confirm('注册成功', {
                        btn: ['去登陆'] //按钮
                    }, function(){
                        window.location.href='/login';
                    })
                }else{
                    layer.msg(data.msg, {icon: 5,time:time});
                    setTimeout(function () {
                        removeDisable();
                    },time)
                }
            },
            error: function (e) {
                removeDisable();
            }
        };
        $("#registerForm").ajaxSubmit(optionsPost);
    }

    $(".forget").click(function () {
        $("#myModal").css("display", "block");
    })


    var closeWind = function () {
        $("#myModal").css("display", "none");
        window.location.reload();
    }

    function checkCode() {
        var check = false;
        var email = $("#email").val();
        var code = $("#imageCode").val();
        if (!code && code.length != 4) {
            return check;
        }
        var emails = [];
        emails.push(email);
        var options = {
            url: '${root}/api/captcha/check?key='+JSON.stringify(emails)+"&value="+code,
            async: false,
            success: function (data) {
                if (data == '1') {
                    check = true;
                }
            }
        };
        $.ajax(options);
        return check;
    }

    var findPwd = function () {
        var email = $("#email").val();
        var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
        if (!myreg.test(email)) {
            toastr.warning('请输入正确的邮箱', '提示')
            return false;
        } else {
            $.ajax({
                'url': '/user/findPasswordByEmail',
                'type': 'post',
                'data': {'email': email},
                'dataType': "json",
                'success': function (resp) {
                    if (resp.success) {
                        /*toastr.warning(resp.msg, '提示')*/
                        alert(resp.msg)
                        /*$("#myModal").;*/
                        $("#myModal").css("display", "none");
                        window.location.reload();

                    } else {
                        toastr.warning(resp.msg, '提示')
                    }
                }, 'error': function (resp) {
                    toastr.error(resp.msg, '提示')
                }
            });
        }
    }

    function disableBtn() {
        $("#btn").attr("disabled","disabled");
    }
    
    function removeDisable() {
        $("#btn").removeAttr("disabled");
    }

</script>
</body>
</@html>
